import React, { Component } from 'react';
import "../../styles/Index/Home/Swiper.scss"
import * as service from "../../api/index";
import { Swiper } from 'antd-mobile';


class swiper extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pics: []
        }
    }
    async componentDidMount() {
        var res = await service.banner();
        this.setState({ pics: res.data })
    }
    render() {
        return (
            <div className='swiper'>
                <Swiper autoplay loop autoplayInterval={1500}>
                    {
                        this.state.pics.map((item, index) => {
                            return (
                                <Swiper.Item key={index}>
                                    <img src={item.pic} alt="" />
                                </Swiper.Item>
                            )
                        })
                    }
                </Swiper>
            </div>
        );
    }
}

export default swiper;